import React from "react";
import styled from "styled-components";
// Components
import ProjectBox from "../Elements/ProjectBox";
// import FullButton from "../Buttons/FullButton";
// Assets
import ProjectImg1 from "../../assets/img/projects/1.png";
import ProjectImg2 from "../../assets/img/projects/2.png";
import ProjectImg3 from "../../assets/img/projects/3.png";
import ProjectImg4 from "../../assets/img/projects/4.png";
import ProjectImg5 from "../../assets/img/projects/5.png";
import ProjectImg6 from "../../assets/img/projects/6.png";
import AddImage2 from "../../assets/img/add/add2.png";

export default function Projects() {
  return (
    <Wrapper id="projects">
      <div className="whiteBg">
        <div className="container">
          <HeaderInfo>
            <h1 className="font40 extraBold">治理案例</h1>
            <p className="font13">
            荔枝治理需要不断创新和发展新的技术和方法，这将有助于推动相关领域的科技创新。    
             <br />
              荔枝产业的发展不仅可以提高农民收入，还可以推动乡村经济的振兴，如增城区立足荔枝资源优势，推进“12221”市场体系建设，做优做强荔枝产业品牌，推动荔枝一、二、三产业高质量融合发展，助力富农兴农和乡村振兴发展。
            </p>
          </HeaderInfo>
          <div className="row textCenter">
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <ProjectBox
                img={ProjectImg1}
                title="荔枝霜疫病"
                text="由真菌引起，主要危害荔枝叶片、花和果实。症状包括叶片出现褐色斑点、枯萎，果实变小、变软、变黑。治理方法包括使用杀菌剂进行喷洒，加强通风透光，提高荔枝树的抗病能力。"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <ProjectBox
                img={ProjectImg2}
                title="荔枝花叶病"
                text="由病毒引起，主要危害荔枝叶片。症状包括叶片出现黄化、卷曲等异常症状。治理方法包括使用病毒抑制剂进行喷洒，加强荔枝树的养护管理，提高抗病能力。"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <ProjectBox
                img={ProjectImg3}
                title="荔枝蒂虫"
                text="以荔枝果实为食，严重时会导致果实腐烂。治理方法包括使用杀虫剂进行喷洒，加强果实的清洗和消毒，提高荔枝树的抗虫能力。"
                // action={() => alert("clicked")}
              />
            </div>
          </div>
          <div className="row textCenter">
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <ProjectBox
                img={ProjectImg4}
                title="荔枝木虱"
                text="以荔枝叶片为食，严重时会导致叶片大量脱落。治理方法包括使用杀虫剂进行喷洒，加强荔枝树的修剪和管理，提高荔枝树的抗虫能力。"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <ProjectBox
                img={ProjectImg5}
                title="荔枝红蜘蛛"
                text="以荔枝叶片为食，严重时会导致叶片大量脱落。治理方法包括使用杀虫剂进行喷洒，加强荔枝树的修剪和管理，提高荔枝树的抗虫能力。"
                // action={() => alert("clicked")}
              />
            </div>
            <div className="col-xs-12 col-sm-4 col-md-4 col-lg-4">
              <ProjectBox
                img={ProjectImg6}
                title="荔枝黑星病"
                text="由真菌引起，主要危害荔枝果实表面。症状包括出现黑色斑点。治理方法包括使用杀菌剂进行喷洒，加强果实的清洗和消毒，提高荔枝树的抗病能力。"
                // action={() => alert("clicked")}
              />
            </div>
          </div>
          <div className="row flexCenter">
            <div style={{ margin: "50px 0", width: "200px" }}>
              {/* <FullButton title="Load More" action={() => alert("clicked")} /> */}
            </div>
          </div>
        </div>
      </div>
      <div className="lightBg">
        <div className="container">
          <Advertising className="flexSpaceCenter">
            <AddLeft>
              <AddLeftInner>
                <ImgWrapper className="flexCenter">
                  <img className="radius8" src={AddImage2} alt="add" />
                </ImgWrapper>
              </AddLeftInner>
            </AddLeft>
            <AddRight>
              {/* <h4 className="font15 semiBold">A few words about company</h4> */}
              <h2 className="font40 extraBold">荔枝的益处</h2>
              <p className="font12">
              荔枝是一种营养丰富的水果，含有葡萄糖、蔗糖、蛋白质、脂肪以及维生素A、B、C等，并含叶酸、精氨酸、色氨酸等各种营养素。荔枝的功效主要有三个方面：1、补充能量：荔枝糖分比例非常高，可占70%,所以当机体缺乏能量疲惫时或出现低血糖时，通过吃荔枝可迅速补充机体的能量使体力恢复；2、美容养颜：荔枝富含维生素C和蛋白质，维C是胶原蛋白合成的主要成分，可使皮肤光滑而有弹性，从而起到美容美颜的效果；3、促进食欲：荔枝口感酸甜，同时具有补益脾胃的作用，有助于改善食欲和促进消化  。   </p>
              <ButtonsRow className="flexNullCenter" style={{ margin: "30px 0" }}>
                <div style={{ width: "190px" }}>
                  {/* <FullButton title="Get Started" action={() => alert("clicked")} /> */}
                </div>
                <div style={{ width: "190px", marginLeft: "15px" }}>
                  {/* <FullButton title="Contact Us" action={() => alert("clicked")} border /> */}
                </div>
              </ButtonsRow>
            </AddRight>
          </Advertising>
        </div>
      </div>
    </Wrapper>
  );
}

const Wrapper = styled.section`
  width: 100%;
`;
const HeaderInfo = styled.div`
  @media (max-width: 860px) {
    text-align: center;
  }
`;
const Advertising = styled.div`
  padding: 100px 0;
  margin: 100px 0;
  position: relative;
  @media (max-width: 1160px) {
    padding: 60px 0 40px 0;
  }
  @media (max-width: 860px) {
    flex-direction: column;
    padding: 0 0 30px 0;
    margin: 80px 0 0px 0;
  }
`;
const ButtonsRow = styled.div`
  @media (max-width: 860px) {
    justify-content: space-between;
  }
`;
const AddLeft = styled.div`
  position: relative;
  width: 50%;
  p {
    max-width: 475px;
  }
  @media (max-width: 860px) {
    width: 80%;
    order: 2;
    text-align: center;
    h2 {
      line-height: 3rem;
      margin: 15px 0;
    }
    p {
      margin: 0 auto;
    }
  }
`;
const AddRight = styled.div`
  width: 50%;
  @media (max-width: 860px) {
    width: 80%;
    order: 2;
  }
`;
const AddLeftInner = styled.div`
  width: 100%;
  position: absolute;
  top: -300px;
  left: 0;
  @media (max-width: 1190px) {
    top: -250px;
  }
  @media (max-width: 920px) {
    top: -200px;
  }
  @media (max-width: 860px) {
    order: 1;
    position: relative;
    top: -60px;
    left: 0;
  }
`;
const ImgWrapper = styled.div`
  width: 100%;
  padding: 0 15%;
  img {
    width: 100%;
    height: auto;
  }
  @media (max-width: 400px) {
    padding: 0;
  }
`;
